<template>
    <view class="scrollBox">
        <scroll-view class="scroll_view" scroll-x="true">
            <view class="Item" v-for="(imgItem, index) in imgList" :key="index">
                <image
                    @click="preview(imgItem.path)"
                    class="img"
                    :src="imgItem.path"
                    mode="aspectFill"
                />
            </view>
            <view class="Item">
                <image
                    @click="chooseImg"
                    class="img"
                    src="https://ly-sys-image.oss-cn-beijing.aliyuncs.com/img/uploads/api/202405/618_f6f59f7cebc0792032543e58d40aedf4.png"
                    mode="scaleToFill"
                />
            </view>
        </scroll-view>
        <img-pop
            :img_pop_show="img_pop_show"
            :img_path="img_path"
            @change_img_pop_show="change_img_pop_show"
        />
    </view>
</template>

<script>
import imgPop from "@/pages_second/publish/imgPop.vue";
import { chooseImageFn, uploadFn } from "@/common";
export default {
    components: { imgPop },
    props: ["imgList"],
    data() {
        return {
            img_pop_show: false,
            img_path: "",
        };
    },
    methods: {
        async chooseImg() {
            try {
                const res = await chooseImageFn();
                const path = await uploadFn(res);
                this.$emit("pushImgList", path);
            } catch (error) {
                console.log(error);
            }
        },
        preview(path) {
            this.img_path = path;
            this.change_img_pop_show();
        },
        change_img_pop_show() {
            this.img_pop_show = !this.img_pop_show;
        },
    },
    onLoad() {},
};
</script>

<style lang="scss" scoped>
.scrollBox {
    .scroll_view {
        white-space: nowrap;
        .Item {
            padding: 24rpx;
            display: inline-block;
        }
        .img {
            width: 234rpx;
            height: 234rpx;
            border-radius: 24rpx;
        }
    }
}
</style>
